<!--
 @description
 @fileName DetailInfo.vue
 @author zengqiongying
 @created 2023-05-03 14:26:40
-->
<template>
  <div>
    <Card no-mg :round="false">
      <DealerCell :detail="dealerData">
        <div style="margin-top: 8px" :class="{ 'color-org': typeCode === 'D', 'color-normal': typeCode === 'C' }">
          经销商门店{{ typeCode === 'C' ? '新增业务' : '取消业务' }}
        </div>
      </DealerCell>
    </Card>
    <Card no-mg :round="false">
      <Cell
        title="是否需要其他业务客户经理接收知晓"
        :modelValue="detail.isOtherReceiveManagerKnow"
        default-value="--"
        readonly
        dict-type-code="BOOLEANS"
      />
      <template v-if="[1, '1'].includes(detail.isOtherReceiveManagerKnow)">
        <Cell title="接收客户经理" default-value="--" readonly :modelValue="detail.receiveManagerName" />
        <template v-if="!!detail.receiveManagerCode">
          <Cell :modelValue="detail.receiveManagerCode" title="接收客户经理编码" readonly />
          <Cell :modelValue="detail.receiveManagerTypeName" title="接收客户经理类型" readonly />
          <Cell :modelValue="detail.receiveManagerTel" title="接收客户经理电话" readonly />
        </template>
      </template>
      <Cell title="提报意见" is-column custom :right="false" :modelValue="detail.submitAnOpinion" readonly />
    </Card>
    <Card v-for="(item, i) in shopList" :key="i" no-mg :round="false">
      <template #title>
        <div class="shop-title">
          {{ item.code }} <span>{{ item.name }}</span>
        </div>
      </template>
      <Cell title="详细地址" :modelValue="item.shopAddr" defaultValue="--" readonly custom />
      <Cell title="门店经营面积(㎡)" :modelValue="item.operateArea" defaultValue="--" readonly />
      <Cell title="门店业务类型变更" is-column custom readonly>
        <div class="business-type-tag">
          <Tag
            v-for="(o, j) in getBusinessTypeNames(item)"
            :key="j"
            :plain="getCheckedStatus(o, item)"
            :type="getCheckedStatus(o, item) ? 'primary' : 'default'"
          >
            <span v-if="checkNew(o, item)" class="new">新增</span>
            <span v-if="checkCancel(o, item)" class="cancel">取消</span>
            {{ o }}
          </Tag>
        </div>
      </Cell>
      <template v-if="typeCode === 'D'">
        <Cell title="业务取消原因" :modelValue="item.cancelReason" default-value="--" readonly custom />
        <Cell title="取消业务附件" is-column custom readonly>
          <AttachmentUpload readonly v-model="item.attachment.ACCESS068" typeCode="ACCESS068" :objectId="item.id" />
          <div v-if="item.attachment.ACCESS068.length === 0">暂无相关附件</div>
        </Cell>
      </template>
      <template v-if="typeCode === 'C'">
        <Cell title="补充协议附件" is-column custom readonly>
          <AttachmentUpload readonly v-model="item.attachment.ACCESS065" typeCode="ACCESS065" :objectId="item.id" />
          <div v-if="item.attachment.ACCESS065.length === 0">暂无相关附件</div>
        </Cell>
        <Cell title="是否报图" :modelValue="item.isReportPic === 1 ? '是' : '否'" default-value="--" readonly />
        <Cell
          title="特殊建档附件"
          sub-title="(如未报图/未交保证金等情况，业务请示申请审核通过的流程附件)"
          is-column
          custom
          readonly
          divider
        >
          <AttachmentUpload readonly v-model="item.attachment.ACCESS067" typeCode="ACCESS067" :objectId="item.id" />
          <div v-if="item.attachment.ACCESS067.length === 0">暂无相关附件</div>
        </Cell>
        <Cell title="成品面积（㎡）" :modelValue="item.endProductArea" defaultValue="--" readonly />
        <Cell title="全屋定制面积（㎡）" :modelValue="item.fullHouseArea" defaultValue="--" readonly />
        <Cell title="整体橱柜面积（㎡）" :modelValue="item.cabinetArea" defaultValue="--" readonly />
        <Cell title="卫浴面积（㎡）" :modelValue="item.bathroomArea" defaultValue="--" readonly />
        <Cell title="样板间面积（㎡）" :modelValue="item.modelRoomArea" defaultValue="--" readonly />
        <Cell title="窗帘面积（㎡）" :modelValue="item.curtainArea" defaultValue="--" readonly />
        <Cell title="单店总面积（㎡）" :modelValue="item.totalArea" defaultValue="--" readonly />
        <Cell title="橱柜套数" :modelValue="item.cabinetSuite" defaultValue="--" readonly />
        <Cell title="卫浴套数" :modelValue="item.bathroomSuite" defaultValue="--" readonly />
        <Cell title="是否缴纳保证金" :modelValue="item.isDeposit ? '是' : '否'" defaultValue="--" readonly />
        <template v-if="item.isDeposit">
          <Cell
            title="保证金缴纳日期"
            :modelValue="parseTime(item.depositDate, '{y}年{m}月{d}日')"
            defaultValue="--"
            readonly
          />
          <Cell title="成品保证金金额（元）" :modelValue="item.finishedDeposit" defaultValue="--" readonly />
          <Cell title="定制保证金金额（元）" :modelValue="item.customizedDeposit" defaultValue="--" readonly />
          <Cell title="橱柜保证金金额（元）" :modelValue="item.cupboardDeposit" defaultValue="--" readonly />
          <Cell title="卫浴保证金金额（元）" :modelValue="item.bathroomDeposit" defaultValue="--" readonly />
        </template>
      </template>
    </Card>
    <Card title="客户业务类型变更" no-mg :round="false">
      <Cell title="经销商业务变更" sub-title="经销商业务类型根据店铺自动生成不可修改" is-column custom readonly divider>
        <div class="business-type-tag">
          <Tag v-for="(o, j) in getBusinessTypeNames(allBusinessType)" :key="j">
            <span v-if="checkNew(o, allBusinessType)" class="new">新增</span>
            <span v-if="checkCancel(o, allBusinessType)" class="cancel">取消</span>
            {{ o }}
          </Tag>
        </div>
      </Cell>
      <Cell
        :title="`${detail.type === 'D' ? '取消' : '新增'}业务账号编码`"
        :modelValue="detail.accountCode"
        default-value="--"
        readonly
      />
      <Cell
        :title="`${detail.type === 'D' ? '取消' : '新增'}业务账号名称`"
        :modelValue="detail.accountName"
        default-value="--"
        readonly
      />
      <Cell title="业务账号类型" :modelValue="detail.accountTypeName" default-value="--" readonly />
    </Card>

    <Card title="BPM审批信息" no-mg :round="false">
      <Cell title="申请人" :modelValue="detail.createBy" default-value="--" readonly />
      <Cell
        title="申请时间"
        :modelValue="parseTime(detail.createTime, '{y}年{m}月{d}日')"
        default-value="--"
        readonly
      />
      <Cell title="BPM单号" :modelValue="detail.applyNo" default-value="--" readonly />
      <div v-for="(v, i) in detail.opinionDTOS" :key="i" class="group-box">
        <Cell title="步骤名" :modelValue="v.strStepName" default-value="--" custom readonly />
        <Cell title="操作时间" :modelValue="v.dtCreateDate" default-value="--" readonly />
        <Cell title="操作人" :modelValue="v.strApproverName" default-value="--" readonly />
        <Cell title="操作状态" :modelValue="v.strAction" default-value="--" readonly />
        <Cell title="意见留言" :modelValue="v.strComments" default-value="--" custom readonly />
      </div>
      <!-- <template v-if="typeCode === 'D'">
        <Cell
          title="审批结束时间"
          :modelValue="parseTime(detail.authorityReviewTime, '{y}年{m}月{d}日')"
          default-value="--"
          readonly
        />
        <Cell
          title="审批结果"
          :modelValue="detail.authorityReviewResult"
          dictTypeCode="REVIEW_RESULT"
          default-value="--"
          readonly
          custom
        />
        <Cell
          title="审批意见"
          :modelValue="detail.authorityReviewAdvice"
          default-value="--"
          readonly
          is-column
          custom
        />
        <Cell
          title="权限处理结束时间"
          :modelValue="parseTime(detail.authorityReviewTime, '{y}年{m}月{d}日')"
          default-value="--"
          readonly
        />
      </template>
      <template v-if="typeCode === 'C'">
        <Cell
          title="办事处审批结果"
          :modelValue="detail.officeReviewResult"
          dictTypeCode="REVIEW_RESULT"
          default-value="--"
          readonly
          custom
        />
        <Cell
          title="办事处审批意见"
          :modelValue="detail.officeReviewAdvice"
          default-value="--"
          readonly
          is-column
          custom
          divider
        />
        <Cell
          title="办事处会计处理意见"
          :modelValue="detail.officeAccountingReviewAdvice"
          default-value="--"
          readonly
          is-column
          custom
          divider
        />
        <Cell
          title="办事处审批完成时间"
          :modelValue="parseTime(detail.officeReviewTime, '{y}年{m}月{d}日')"
          default-value="--"
          readonly
          divider
        />
        <Cell
          title="档案科审核结果"
          :modelValue="detail.fileReviewResult"
          dictTypeCode="REVIEW_RESULT"
          default-value="--"
          readonly
          custom
          divider
        />

        <Cell
          title="档案科审批时间"
          :modelValue="parseTime(detail.fileReviewTime, '{y}年{m}月{d}日')"
          default-value="--"
          readonly
        />
        <Cell
          title="档案审核意见"
          :modelValue="detail.fileReviewAdvice"
          default-value="--"
          readonly
          is-column
          custom
          divider
        />
        <Cell
          title="系统权限处理审核时间"
          :modelValue="parseTime(detail.authorityReviewTime, '{y}年{m}月{d}日')"
          default-value="--"
          readonly
        />
        <Cell
          title="系统权限处理审核意见"
          :modelValue="detail.authorityReviewAdvice"
          default-value="--"
          readonly
          is-column
          custom
        />
      </template> -->
    </Card>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, toRefs, reactive, watch, getCurrentInstance } from 'vue'
  import Card from '@/components/Card/index.vue'
  import Cell from '@/components/Cell/index.vue'
  import DealerCell from '@/components/DealerCell/index.vue'
  import AttachmentUpload from '@/components/AttachmentUpload/index.vue'
  import { detail } from '@/apis/dealerMarketing/FreezeAndthaw'
  import { parseTime } from '@/utils'
  import Tag from '@/components/Tags/Tag.vue'
  const none: any[] = [undefined, null, '']
  interface anyObjectModle {
    [key: string]: any
  }
  export default defineComponent({
    name: 'ShopChangeDetailInfo',
    components: { Card, Cell, DealerCell, AttachmentUpload, Tag },
    props: {
      id: {
        type: String,
        default: ''
      }
    },
    setup(props, ctx) {
      const { proxy }: any = getCurrentInstance()
      const datas = reactive<anyObjectModle>({
        detail: {},
        shopList: []
      })
      // 单据类型
      const typeCode = computed(() => {
        return datas.detail?.type || 'C'
      })

      const dealerData = computed(() => {
        const d = datas.detail
        return {
          code: d.customerCode || '',
          name: d.customerName || '',
          officeCode: d.officeCode || '',
          officeName: d.officeName || '',
          createBy: d.createBy || ''
        }
      })

      const getShopList = () => {
        const list = datas.detail?.shopBusinessDTOS || []
        const changedList = list.filter((v: any) => [1, '1'].includes(v.isChange))
        datas.shopList = changedList.map((v: any) => {
          return {
            ...v,
            ...{
              attachment: {
                ACCESS068: [], //取消业务附件
                ACCESS065: [], //补充协议附件
                ACCESS067: [] // 特殊建档附件
              }
            }
          }
        })
      }
      const allBusinessType = computed(() => {
        let afterNames: any[] = []
        let oldNames: any[] = []
        const shops = datas.detail?.shopBusinessDTOS || []
        shops.forEach((v: any) => {
          const oTmp = none.includes(v.businessTypeName) ? [] : v.businessTypeName.split(',')
          const nTmp = none.includes(v.afterBusinessTypeName) ? [] : v.afterBusinessTypeName.split(',')
          oldNames = [...oldNames, ...oTmp]
          afterNames = [...afterNames, ...nTmp]
        })
        afterNames = [...new Set(afterNames)]
        oldNames = [...new Set(oldNames)]
        return {
          afterBusinessTypeName: afterNames.join(','),
          businessTypeName: oldNames.join(',')
        }
      })

      const getDetail = () => {
        const id = `${props.id}`
        detail(id).then((res) => {
          datas.detail = res.data
          getShopList()
          proxy.$SimpleEvents.emit(
            'routeMetaTitle',
            datas.detail.type === 'C' ? '新增业务变更详情' : '取消业务变更详情'
          )
          ctx.emit('data-change', res.data)
        })
      }

      watch(
        () => props.id,
        () => {
          getDetail()
        },
        {
          immediate: true
        }
      )
      //获取业务类型
      const getBusinessTypeNames = (data: any) => {
        const names = none.includes(data.afterBusinessTypeName) ? [] : data.afterBusinessTypeName.split(',')
        const oldNames = none.includes(data.businessTypeName) ? [] : data.businessTypeName.split(',')
        if (datas.detail.type === 'D') {
          // 取消业务变更
          return oldNames
        } else {
          // 新增业务变更
          const list = [...names, ...oldNames]
          return new Set(list)
        }
      }

      // 设置业务类型选中状态
      const getCheckedStatus = (name: string, data: any) => {
        const names = none.includes(data.afterBusinessTypeName) ? [] : data.afterBusinessTypeName.split(',')
        return names.includes(name)
      }
      // 判断是否新增业务类型
      const checkNew = (name: string, data: any) => {
        if (typeCode.value !== 'C' || none.includes(data.afterBusinessTypeName)) return false
        const oldTypes = none.includes(data.businessTypeName) ? [] : data.businessTypeName.split(',')
        if (oldTypes.includes(name)) {
          return false
        }
        return getCheckedStatus(name, data)
      }
      // 判断是否取消业务类型
      const checkCancel = (name: string, data: any) => {
        if (typeCode.value !== 'D' || none.includes(data.afterBusinessTypeName)) return false
        if (getCheckedStatus(name, data)) return false
        const oldTypes = none.includes(data.businessTypeName) ? [] : data.businessTypeName.split(',')
        return oldTypes.includes(name)
      }

      return {
        ...toRefs(datas),
        typeCode,
        dealerData,
        allBusinessType,
        getBusinessTypeNames,
        getCheckedStatus,
        checkNew,
        checkCancel,
        parseTime
      }
    }
  })
</script>
<style lang="less" scoped>
  .shop-title {
    padding: 0 14px;
    font: var(--font-card-title);
    color: var(--texticon-color-brand-normal);
    span {
      margin-left: 10px;
    }
  }
  .account-list {
    padding: 0 16px;
    .radio {
      width: 24px;
      height: 24px;
      border: 1px solid;
    }
    /deep/ .qmp-checkbox__label {
      flex: 1;
    }
    .account-item {
      padding: 16px 0;
      .title {
        margin-bottom: 2px;
        display: flex;
        align-items: center;
        .tag {
          display: inline-block;
          padding: 2px 4px;
          background: var(--bg-focusing-brand);
          border-radius: ' 2px 2px 2px 2px';
          border: 1px solid var(--button-main-default);
          font: var(--font-point);
          color: var(--texticon-color-brand-normal);
          margin-right: 4px;
        }
        .code {
          font: var(--font-main-title-strengthen);
          color: var(--texticon-default-strong);
        }
        .state {
          flex: 1;
          font: var(--font-main-body);
          text-align: right;
        }
      }
      .address {
        font: var(--font-main-title-body);
        color: var(--texticon-default-strong);
      }
    }
  }
  .business-type-tag {
    .tag {
      margin-top: 10px;
    }
    .new,
    .cancel {
      position: absolute;
      right: -6px;
      top: -10px;
      padding: 2px;
      border-radius: 20px;
      font: var(--font-small);
      background: var(--texticon-contrary-strong);
    }
    .new {
      border: 1px solid var(--button-main-default);
      color: var(--texticon-color-brand-normal);
    }
    .cancel {
      border: 1px solid var(--texticon-color-secondary-normal);
      color: var(--texticon-color-secondary-normal);
    }
  }
</style>
